<template>
  <div class="app-container h-full">
    <div class="table-container flex flex-col h-full">
      <BasePageTable :table-data="tableData" :table-columns-data="tableColumnsData" :total="total" :loading="loading"
        @handle-query="handleChangePage" :pageSize="queryParams.pageSize" :page-num="queryParams.pageNum">
        <template #categoryCommission="{ row }">
          {{ row.categoryCommission * 100 }}
        </template>
        <template #enable="{ row }">
          <span v-if="row.enable == 1">启用</span>
          <span v-else>禁用</span>
        </template>
      </BasePageTable>
    </div>
  </div>
</template>

<script setup lang="ts">
import categoryApi from '@/api/category/category-api'

const tableData = ref()
const tableColumnsData = ref([
  {
    type: "index",
    label: "序号",
    width: 60,
    align: "center",
  },
  {
    prop: "name",
    label: "品类名称",
    align: "center",
  },
  {
    prop: "categoryCommission",
    label: "分佣（%)",
    align: "center",
    customSlot: 'categoryCommission'
  },
  {
    prop: "enable",
    label: "品类状态",
    align: "center",
    customSlot: 'enable'
  },
  {
    prop: "sort",
    label: "排序",
    align: "center",
  },
])
const total = ref()
const loading = ref(false)
const queryParams = ref({
  pageSize: 10,
  pageNum: 1,
  parentId: 2
})


function handleChangePage() {

}

async function getList() {
  try {
    const res: any = await categoryApi.categoryList(queryParams.value)
    tableData.value = res.data
    total.value = res.total

  } catch (error) { }
}

onMounted(() => {
  getList()
})
</script>
